<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
  <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
  <title>project</title>
</head>

<body>
  <div id="main" style="width:100%;height:400px;"></div>
  <script>
    // 绘制图表。
    var opt = {
      title: {
        text: '工作流甘特图'
      },
      legend: {
        data: ['计划完成时间', '实际完成时间']

      },
      xAxis: {
        type: 'time',
        position: "top"
      },

      yAxis: {
        type: "category",
        data: ['测试', '开发', '设计', '总进度']

      },
      tooltip: {
        trigger: 'axis',
        formatter: function(params) {
          var res = params[0].name + "</br>"
          var date0 = params[0].data;
          var date1 = params[1].data;
          var date2 = params[2].data;
          date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
          date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
          date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
          res += params[0].seriesName + ":" + date0 + "</br>"
          res += params[1].seriesName + ":" + date1 + "</br>"
          res += params[2].seriesName + ":" + date2 + "</br>"
          console.log(params[0]);
          return res;
        }
      },
      series: [

        {
          name: '计划开始时间',
          type: 'bar',
          stack: '总量',
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: [
            new Date("2017/09/23"),
            new Date("2017/09/10"),
            new Date("2017/09/1"),
            new Date("2017/09/1"),

          ]
        },


        {
          name: '计划完成时间',
          type: 'bar',
          stack: '总量',
          data: [
            new Date("2017/09/31"),
            new Date("2017/09/20"),
            new Date("2017/09/15"),
            new Date("2017/09/30"),


          ]
        }, {
          name: '实际完成时间',
          type: 'bar',
          stack: '总量',
          data: [
            new Date("2017/09/30"),
            new Date("2017/09/23"),
            new Date("2017/09/14"),
            new Date("2017/09/30"),

          ]
        }
      ]
    };
    echarts.init(document.getElementById('main')).setOption(opt);
  </script>
</body>

</html>